<template>
	<view>
		<view>
			<swiper interval="1000" indicator-dots="true" autoplay="true" circular="true">
				<swiper-item>
					<image mode="widthFix"
						src="https://c-ssl.duitang.com/uploads/blog/202106/19/20210619125849_ef42c.jpg"></image>
				</swiper-item>
				<swiper-item class="cri">
					<image mode="widthFix"
						src="https://c-ssl.duitang.com/uploads/blog/202106/19/20210619125858_9c326.jpg">
					</image>
				</swiper-item>
				<swiper-item>
					<image mode="widthFix"
						src="https://c-ssl.duitang.com/uploads/blog/202106/19/20210619125856_84a2d.jpg"></image>
				</swiper-item>
			</swiper>
		</view>
		<view>
			<view style="background-color:#A9A9A920;">
				<text>{{shop.name}}</text>
				<view style="margin-top: 20px;">
					<van-row>
						<van-col span="8">
							￥{{shop.price}}
						</van-col>
						<van-col span="8">
							2000人购买
						</van-col>
						<van-col span="8">
							库存123456
						</van-col>
					</van-row>
				</view>
			</view>
			<view style="height: 20px; margin-top: 10px;background-color: #A9A9A920;display: flex; justify-content: space-between;" @click="Allpingjia">
				
				<view >
					<van-icon  name="comment-o" />
					<text style="margin-left: 33vw;">查看全部评价</text>
				</view>
				<view >
					<van-icon name="arrow" />
				</view>
			</view>
			<view style="text-align: center;margin-top: 3%;margin-bottom: 3%;">
				·商品详情·
			</view>
			<view>
				<van-image width="20rem" height="10rem" fit="contain" :src="shop.src" />
				<van-image width="20rem" height="10rem" fit="contain" :src="shop.src" />

				<van-image width="20rem" height="10rem" fit="contain" :src="shop.src" />

				<van-image width="20rem" height="10rem" fit="contain" :src="shop.src" />
			</view>
			<view>

				<van-goods-action>
					<van-goods-action-button @click="showClick()" text="加入购物车" type="warning" />
					<van-goods-action-button text="立即购买" @click="showPopup()" />
				</van-goods-action>
				<van-overlay :show="show" @click="onClickHide">
					<view class="wrapper">
						<text style="font-size: 25px; color: #fff;">已加入购物车 </text>
					</view>
				</van-overlay>

				<van-popup :show="buyShow" position="bottom" custom-style="height: 30%;" @close="onClose">
					<view>
						<van-row>
							<van-col span="10">
								<view style="margin-left: 10px;">
									<image :src="shop.src" style="width: 90px;height: 90px;"></image>
								</view>
							</van-col>
							<van-col span="10">
								<van-row>{{shop.name}}</van-row>

								<van-row>
									<view style="margin-top: 20px;">
										{{shop.price}}元
									</view>
								</van-row>
							</van-col>
							<van-col span="4">
								<view style="float: right;">
									<image src="../../static/shop_detail_imgs/取消.png" style="width: 25px;height: 25px;">
									</image>
								</view>
							</van-col>
						</van-row>
						<van-row>
							<van-col span="20">
								<view style="margin-left: 20px;">
									购买数量
								</view>
							</van-col>
							<van-col span="4">
								<view class="head-right-bottom-count">
									<view class="head-right-bottom-count-text1">-</view>
									<view class="head-right-bottom-count-text2">1</view>
									<view class="head-right-bottom-count-text3">+</view>
								</view>
							</van-col>
						</van-row>
						<view style="height: 30px;background-color: coral;margin-top: 10px;text-align: center;">
							确认
						</view>
					</view>
				</van-popup>


			</view>
		</view>
	</view>
</template>

<script>
	var orderList = getApp().globalData.orderList
	export default {
		data() {
			return {
				show: false,
				buyShow: false,
				shop: {}
			}
		},
		methods: {
			showClick() {
				this.show = true
			},
			onClickHide() {
				this.show = false
			},
			showPopup() {
				this.buyShow = true
			},

			onClose() {
				this.buyShow = false
			},
			Allpingjia() {
				wx.navigateTo({
					url:"../all_pingjia/all_pingjia"
				})
			}
		},
		onLoad(options) {
			let id = options.id
			orderList.forEach(item => item.id == id ? this.shop = item : '')
		}
	}
</script>

<style>
	.wrapper {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 100%;
	}



	.block {
		width: 120px;
		height: 120px;
		background-color: #fff;
	}

	.head-right-bottom {
		display: flex;
		height: 10vw;
		align-items: flex-end;
		justify-content: space-between;
	}

	.head-right-bottom-count {
		border-radius: 3px;
		height: 6vw;
		align-items: center;
		display: flex;
		border: 1px solid #BFCDD9;
		border-right: 1px;
		background-color: #BFCDD9;
	}

	.head-right-bottom-count-text1 {
		padding: 0 1.5vw;
		color: #fff;
	}

	.head-right-bottom-count-text2 {
		line-height: 6vw;
		height: 6vw;
		font-size: 3vw;
		border-left: 1px solid #BFCDD9;
		padding: 0 2vw;
		background-color: #fff;
	}

	.head-right-bottom-count-text3 {
		line-height: 6vw;
		height: 6vw;
		color: #BFCDD9;
		padding: 0 1vw;
		background-color: #fff;
		border: 1px solid #BFCDD9;
		border-radius: 0 3px 3px 0;
	}
</style>
